<script lang="ts" setup name="NdePersonCertification">
import { getListByConditionsWithPage, getLoginUserInfo, urls } from '@/index';
import type {
  DialogModel,
  DrawerModel,
  NdePersonCertification,
  NdePersonCertificationQueryCondition
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
import NdePersonOperationRecordDrawer from './NdePersonOperationRecordDrawer.vue';
const title = '无损人员证书';
const queryCondition = reactive<NdePersonCertificationQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20,
  isValid: true,
  isLatest: true
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  queryCondition.isValid = true;
  queryCondition.isLatest = true;
  delete queryCondition.username;
  delete queryCondition.method;
  delete queryCondition.level;
  delete queryCondition.domain;
  delete queryCondition.reference;
};

const {
  data: getNdePersonCertificationListData,
  run: getNdePersonCertificationListRun,
  loading: getNdePersonCertificationListLoading
} = useRequest(() =>
  getListByConditionsWithPage<NdePersonCertification>(urls.ndePersonCertification, queryCondition)
);

const handleResetQuery = () => {
  resetQueryCondition();
  getNdePersonCertificationListRun();
};

const viewMyCertifications = () => {
  queryCondition.username = getLoginUserInfo().loginUserUsername;
  getNdePersonCertificationListRun();
};

const detailDialogModel = reactive<DialogModel<NdePersonCertification>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getNdePersonCertificationListRun();
      detailDialogModel.change = false;
    }
  }
);

const ndePersonOperationRecordDrawerModel = reactive<DrawerModel<NdePersonCertification>>({
  visible: false,
  type: 'view',
  id: 0,
  change: false,
  title: ''
});

const viewNdePersonOperationRecord = (row: NdePersonCertification) => {
  ndePersonOperationRecordDrawerModel.id = row.id as number;
  ndePersonOperationRecordDrawerModel.title = ((row.name as string) + row.method) as string;
  ndePersonOperationRecordDrawerModel.data = row;
  ndePersonOperationRecordDrawerModel.visible = true;
};

watch(
  () => ndePersonOperationRecordDrawerModel.visible,
  (value: boolean) => {
    if (!value) {
      ndePersonOperationRecordDrawerModel.id = 0;
      ndePersonOperationRecordDrawerModel.title = '';
    }
  }
);
</script>
<template>
  <HqContainerTable
    :base-url="urls.ndePersonCertification"
    :title="title"
    :loading="getNdePersonCertificationListLoading"
    :total="getNdePersonCertificationListData?.total"
    :table-data="getNdePersonCertificationListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getNdePersonCertificationListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getNdePersonCertificationListRun"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.username"
          filterable
          clearable
          placeholder="请选择人员"
          @change="getNdePersonCertificationListRun"
        >
          <HqUserOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.method"
          clearable
          placeholder="请选择方法"
          @change="getNdePersonCertificationListRun"
        >
          <HqNdeMethodOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.level"
          clearable
          placeholder="请选择等级"
          @change="getNdePersonCertificationListRun"
        >
          <HqNdeMethodLevelOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.domain"
          clearable
          placeholder="请选择领域"
          @change="getNdePersonCertificationListRun"
        >
          <HqNdeMethodDomainOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input v-model="queryCondition.reference" placeholder="请输入证书编号" clearable />
      </hq-col>
      <hq-col kind="search">
        <div style="padding-left: 20px">
          <el-checkbox
            v-model="queryCondition.isValid"
            label="有效证书"
            @change="getNdePersonCertificationListRun"
          />
          <el-checkbox
            v-model="queryCondition.isLatest"
            label="最新证书"
            @change="getNdePersonCertificationListRun"
          />
        </div>
      </hq-col>
    </template>
    <template #button>
      <el-button
        type="primary"
        @click="viewMyCertifications"
        :loading="queryCondition.username === getLoginUserInfo().loginUserUsername"
      >
        我的证书
      </el-button>
    </template>
    <template #tableColumns>
      <HqTableColumn label="连续操作记录" :min-width="100">
        <template #default="{ row }">
          <el-button link type="success" size="default" @click="viewNdePersonOperationRecord(row)">
            连续操作记录
          </el-button>
        </template>
      </HqTableColumn>
      <HqTableColumn label="姓名" :min-width="150">
        <template #default="{ row }">
          <el-select v-model="row.username" disabled>
            <HqUserOptions />
          </el-select>
        </template>
      </HqTableColumn>
      <HqTableColumn label="领域" :min-width="100">
        <template #default="{ row }">
          <el-select v-model="row.domain" disabled>
            <HqNdeMethodDomainOptions />
          </el-select>
        </template>
      </HqTableColumn>
      <HqTableColumn label="方法" :min-width="100">
        <template #default="{ row }">
          <el-select v-model="row.method" disabled>
            <HqNdeMethodOptions />
          </el-select>
        </template>
      </HqTableColumn>
      <HqTableColumn label="等级" :min-width="100">
        <template #default="{ row }">
          <el-rate v-model="row.level" disabled :max="3" />
        </template>
      </HqTableColumn>

      <HqTableColumn label="发证日期" prop="startDate" :min-width="100" />
      <HqTableColumn label="有效期至" prop="endDate" :min-width="100" />
      <HqTableColumn label="证书编号" :min-width="150">
        <template #default="{ row }">
          <el-link
            type="success"
            v-if="row.attachmentUrl"
            :href="row.attachmentUrl"
            target="_blank"
          >
            {{ row.reference }}
          </el-link>
          <el-text v-else>
            {{ row.reference }}
          </el-text>
        </template>
      </HqTableColumn>
      <HqTableColumn label="是否有效" :min-width="100">
        <template #default="{ row }">
          <el-text type="success" v-if="row.isValid">有效证书</el-text>
          <el-text type="danger" v-else>过期证书</el-text>
        </template>
      </HqTableColumn>

      <HqTableColumn label="是否最新" :min-width="100">
        <template #default="{ row }">
          <el-text type="success" v-if="row.isLatest">最新证书</el-text>
          <el-text type="danger" v-else>历史证书</el-text>
        </template>
      </HqTableColumn>
      <HqTableColumn label="初次无损" prop="initNdeDate" :min-width="100" />
      <HqTableColumn label="初次方法" prop="initMethodDate" :min-width="100" />
      <HqTableColumn label="初次方法领域" prop="initMethodDomainDate" :min-width="100" />
      <HqTableColumn label="初次方法领域等级" prop="initMethodDomainLevelDate" :min-width="100" />
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
  <NdePersonOperationRecordDrawer
    v-model:drawer-model="ndePersonOperationRecordDrawerModel"
    v-if="ndePersonOperationRecordDrawerModel.visible"
  />
</template>
<style lang="scss" scoped></style>
